<template>
    <div class="topheader">
        <div class="th_left">
            后台管理系统
        </div>
        <div class="th_right">
            <div class="th_right_name">Admin 01</div>
            <div class="th_right_icon" @click="loginOut()">
                <el-icon :size="18" color="#fff">
                    <SwitchButton />
                </el-icon>

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

import { SwitchButton } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const loginOut = () => {
    ElMessageBox.confirm(
        '确定要退出登录吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            localStorage.clear()
            router.replace('/login')
        })
        .catch(() => {
            //   ElMessage({
            //     type: 'info',
            //     message: 'Delete canceled',
            //   })
        })

}

</script>

<style scoped lang="scss">
.topheader {
    width: 100%;
    height: 62px;
    padding: 0 35px;
    box-sizing: border-box;
    background: #264E71;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .th_left {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    .th_right {
        display: flex;

        .th_right_name {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            width: 100px;
            border-right: 1px solid #FFFFFF;
        }

        .th_right_icon {
            margin-left: 20px;
            cursor: pointer;
        }
    }
}
</style>